<template>
  <div class="notice-root">
<!--    <div class="title">通知管理</div>-->
    <div class="add-notice">
      <el-button plain @click="toggleDialog">
        添加通知
      </el-button>
      <AddNotice :dialogFormVisible="dialogFormVisible" @closeFormVisible="closeFormVisible"></AddNotice>
    </div>
    <div class="notice-list">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column fixed prop="notice_topic" label="通知主题" min-width="120"/>
        <el-table-column prop="notice_content" label="通知内容" min-width="240">
          <template #default="scope">{{ scope.row.notice_content.length > 25 ? scope.row.notice_content.substring(0,25) + "......" : scope.row.notice_content}}</template>
        </el-table-column>
        <el-table-column prop="notice_members_name" label="通知人员"  min-width="160"/>
        <el-table-column prop="notice_copy_members_name" label="抄送人员" min-width="160"/>
        <el-table-column prop="status"  label="发送状态"  min-width="80">
          <template #default="scope">{{ EMAIL_STATUS[scope.row.status]!==undefined ? EMAIL_STATUS[scope.row.status] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="occurtime" label="发送时间" min-width="160">
            <template #default="scope">{{  scope.row.occurtime.replace("T"," ")}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作"  min-width="100">
          <template #default="scope">
            <el-button link type="primary" size="small"
                       v-if="scope.row.status==3"
                       @click="resendEmail(
                           scope.row.id,
                       )"
            >
              重新发送
            </el-button>
            <!--            查看是查看班级里所有的学生-->
            <el-button link type="primary" size="small"
                       v-if="scope.row.status===2"
                       @click="emailDetailView(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <PageSelect
            :pageInfo="pageDetailInfo"
            :totalCount="totalCount"
            @update:pageInfo="handlePageInfoUpdate"
        />
      </div>
      <DetailNotice :detailEmailDialogFormVisible="detailEmailDialogFormVisible"
                    :emailDetailData="emailDetailData"
                    @closeDetailNoticeFormVisible="closeDetailNoticeFormVisible"
      ></DetailNotice>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import AddNotice from "@/components/notice/AddNotice.vue"
import DetailNotice from "@/components/notice/DetailNotice.vue"
import {getNoticesByPageAPI, resendEmailAPI} from "@/network/notice/notice";
import {EMAIL_STATUS} from "@/dict/dict-email";
import eventBus from "@/plugins/event-bus";
import {ElMessage} from "element-plus";
import PageSelect from "@/components/common/PageSelect.vue";

const dialogFormVisible = ref(false);
const toggleDialog = () => {
  dialogFormVisible.value = true;
};

const closeFormVisible = ()=>{
  dialogFormVisible.value = false;
}

const pageDetailInfo = ref({
  currentPage: 1,
  pageSize: 10,
})
const totalCount = ref(0);

const handlePageInfoUpdate = () => {
  getNoticeByPage()
};

let tableData = ref([]);

const getNoticeByPage=()=>{
  const data = {
    skip: pageDetailInfo.value.currentPage,
    limit: pageDetailInfo.value.pageSize,
  }
  getNoticesByPageAPI(data).then((res)=>{
    totalCount.value = res.data.total_count
    tableData.value = res.data.data
  })
}

onMounted(()=>{
  getNoticeByPage()
})


// 重新发送邮件
const resendEmail = (id) => {
  resendEmailAPI(id).then((res)=>{
    if(res.data.code!=0){
      ElMessage.error(res.data.message)
      return
    }else{
      ElMessage.success(res.data.message)
      //  邮件发送成功，需要通知父组件重新渲染数据
      getNoticeByPage();
    }
  })
}

// 收到邮件发送成功后，重新渲染邮件列表
eventBus.on("update-email-list-event",()=>{
  getNoticeByPage();
})

// 查看邮件详情
const detailEmailDialogFormVisible = ref(false);
let emailDetailData = ref({});
const emailDetailView = (rowInfo)=>{
  emailDetailData.value={
    id: rowInfo.id,
    topic: rowInfo.notice_topic,
    content: rowInfo.notice_content,
    copy_members_name: rowInfo.notice_copy_members_name,
    members_name: rowInfo.notice_members_name,
    occurtime: rowInfo.occurtime
  }

  detailEmailDialogFormVisible.value=true;
}
const closeDetailNoticeFormVisible = ()=>{
  detailEmailDialogFormVisible.value = false;
}


</script>

<style scoped lang="less">
.notice-root {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  .add-notice {
    text-align: left;
    button {
      margin-left: 20px;
      margin-top: 20px;
      width: 100px;
      height: 30px;
      color: #5FADFF;
      font-weight: bold;
      background-color: #fff;
      border: 1px solid #5FADFF;
      border-radius: 10px;
    }
  }

  .notice-list {
    padding: 20px;
    // 让子标签的表格位于中间
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-wrap: wrap; // 定义换行

    .page-container {
      margin-top: 20px;
    }
  }
}


</style>